{% extends 'base.html' %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
    {#    {{ projects }}#}
    {% for key, value in projects.items %}
        <div class="container-fluid">
            <div class="card border-0">
                <div class="card-body">
                    <!--row-cols-1 控制手机视图中有几列, row-cols-lg-4控制网页视图列数-->
                    <div class="row row-cols-1 row-cols-lg-4">
                        {% for spider in value.spiders %}
                            <div class="col">
                                <div class="card border-0 shadow-sm">
                                    <div class="card-header">
                                        项目: {{ key }}
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex flex-column align-items-center text-center">
                                            <p class="text-secondary mb-1">爬虫:</p>
                                            <h4>
                                                {{ spider }}
                                            </h4>
                                            <div class="col">
                                                <button class="btn btn-primary">启动</button>
                                                {#                                                <button class="btn btn-outline-primary">消息</button>#}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    <script src="/static/js/jquery-3.7.0.min.js"></script>
    <script>
        $(function () {
            $(".btn-primary").click(function () {
                var project = $(this).parent().parent().parent().parent().find(".card-header").text().split(":")[1].trim();
                var spider = $(this).parent().parent().find("h4").text().trim();
                $.ajax({
                    url: "/spiders/run",
                    type: "post",
                    data: {
                        project: project,
                        spider: spider
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.status === 'ok') {
                            alert("启动成功");
                        } else {
                            alert("启动失败");
                        }
                    }
                });
            });
        });
    </script>


{% endblock %}